<!-- WeatherView -->
<template>
    <!-- 正在加载... -->
    <div class="loading" v-if="weather.city === null">
        <div class="loading-text">天气信息加载中...</div>
    </div>
    <div class="container" v-else>
        <p>你正在预览{{ weather.city }}的天气信息，可以通过右上角的"+"号按钮保存起来</p>
        <div class="text-center">
            <h1 class="flex flex-col text_lg flex-1 gap4">
                当前气温是：{{ weather.temperature }}摄氏度
            </h1>
            <h1 class="flex flex-col text_lg flex-1 gap4">
                当前天气是：{{ weather.weather }}
            </h1>
            <h1 class="flex flex-col text_lg flex-1 gap4">
                当前风向是：{{ weather.winddirection }}
            </h1>
            <h1 class="flex flex-col text_lg flex-1 gap4">
                当前风力是：{{ weather.windpower }}级
            </h1>
        </div>
        <!-- 分割线 -->
        <hr />
        <div class="weather-container">
            <RecentWeather />
        </div>
    </div>
</template>
<script setup>
import RecentWeather from "@/components/RecentWeather.vue";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { getTodayWeatherByAdcode } from "@/api/getData";
// 获取传入的路由参数
const route = useRoute();
// 根据cityCode获取天气信息
// 过来的路由：router.push(`/weather/${city.adcode}?search=${city.name}`);
const weather = ref({});
onMounted(async () => {
    const res = await getTodayWeatherByAdcode(route.params.cityCode);
    weather.value = res;
});
</script>
<style scoped>
* {
    box-sizing: border-box;
}
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.container p {
    width: 100%;
    text-align: center;
    padding: 8px;
    margin: 0;
    font-size: 16px;
    background-color: #004e71;
}
.text-center {
    padding: 0 160px;
    margin: 24px 102px 0;
}
/* 设置hr的颜色为灰色 */
hr {
    border: 0.5px solid #177494;
    margin-bottom: 0;
    width: 100%;
}
.weather-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding: 10px 262px;
    width: 100%;
}
/* 设置组件距离hr的距离 */
.weather-container > * {
    margin-top: 0px;
}
</style>
